<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="card">
        <el-row class="title-box">
          <span class="title">组织架构</span>
        </el-row>
        <div class="tree-card">
          <treeTools
            :tree-node="company"
            :is-root="true"
            @addDepts="addDepts"
          />
          <el-tree
            :data="departs"
            :props="defaultProps"
            :default-expand-all="true"
          >
            <treeTools
              slot-scope="{ data, node }"
              :tree-node="data"
              :node="node"
              @delDepts="getDepartments"
              @addDepts="addDepts"
              @editDepts="editDepts"
            />
          </el-tree>
        </div>
      </el-card>
    </div>
    <addDept
      ref="addDept"
      :show-dialog.sync="showDialog"
      :tree-node="nodes"
      @addDepts="getDepartments"
    />
  </div>
</template>

<script>
import treeTools from './components/tree-tools.vue'
import { getDepartments } from '@/api/departments'
import { tranListToTreeData } from '@/utils'
import addDept from './components/add-dept.vue'
export default {
  components: {
    treeTools,
    addDept
  },
  data () {
    return {
      company: {},
      departs: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      showDialog: false,
      nodes: {}
    }
  },
  created () {
    this.getDepartments()
  },
  methods: {
    async getDepartments () {
      const res = await getDepartments()
      this.company = { name: res.companyName, manager: '负责人', id: '' }
      this.departs = tranListToTreeData(res.depts, '')
    },
    addDepts (nodes) {
      this.showDialog = true
      this.nodes = nodes
    },
    editDepts (nodes) {
      this.showDialog = true
      this.nodes = nodes
      this.$refs.addDept.getDepartDetail(nodes.id)
    }
  }
}
</script>

<style scoped>
.card {
  padding: 30px;
}
.title-box {
  border-bottom: 3px solid #ccc;
}
.title {
  display: inline-block;
  padding-bottom: 7px;
  position: relative;
  color: #5787fe;
  border-bottom: 3px solid #5787fe;
  margin-bottom: -3px;
}
.tree-card {
  padding: 30px 100px;
  font-size: 14px;
}
</style>
